<template>
	<view style="min-height: 100vh;height: auto;" class="bgm">
		<!-- <view style="height: 100vh;" class="theme_bg_vice_color"> -->
		<cu-custom :isBack="true" :bgColor="'bg-black'" :backColor="'text-white'">
			<block slot="backText"><view class="text-white">预约车队详情</view></block>
		</cu-custom>
		<view class="bgmm" :style="'background-image: url(' + $isHttp(dataObj.picture) + ');'"></view>
		<!-- <view class="bgmm" :style="'background:rgb(' + dataObj.rgb_color + ');'"></view> -->
		<view v-if="dataObj === ''" style="background-color: #fff;height: 100vh;">
			<van-skeleton title avatar avatar-size="120px" row="3" avatar-shape="square" />
			<van-skeleton row="20" />
		</view>
		<view class="margin-sm padding-bottom-xl radius12" style="height: auto;color: #fef7fe;">
			<view class="cu-card article">
				<view class=" shadow padding-sm">
					<view class="flex justify-start" style="position: relative;">
						<image :src="$isHttp(dataObj.picture)" style="width: 212rpx;height: 300rpx;border-radius: 12rpx;" mode="aspectFill" @click="$goPage('/pageB/script/info?id='+dataObj.playId+'&allowAppointment=0')"></image>
						<view class="desc margin-left-sm">
							<view class="flex justify-start margin-top-xs">
								<view class="text-bold">{{ dataObj.name }}</view>
							</view>
							<view class="margin-top-sm text-sm">
								人数：{{ dataObj.number }}人
								<text>{{ dataObj.sex_type }}</text>
							</view>
							<view class="margin-top-xs text-sm">
								价格：
								<text class="text-yellow text-bold">{{ dataObj.price }}元</text>
								/位
							</view>
							<view class="margin-top-xs text-sm">难度：{{ dataObj.difficulty }}</view>
							<view class="margin-top-xs text-bold">日期：{{ dataObj.date }}</view>
							<view class="margin-top-xs text-bold">时间：{{ dataObj.time }} {{ dataObj.week }}</view>
						</view>
						<view class="bg-black text-center" style="position: absolute; width: 212rpx;bottom: 0;" @click="$goPage('/pageB/script/info?id='+dataObj.playId+'&allowAppointment=0')">剧本详情</view>
					</view>
				</view>
			</view>

			<view class="margin-sm dm flex justify-start">
				<view class="flex justify-around align-center" style="width: 212rpx;">
					<view @click="callPhone"><image src="../../static/icon/pcxqdh.png" style="width: 40rpx;height: 40rpx;" mode=""></image></view>
					<view @click="map"><image src="../../static/icon/pcxqdw.png" style="width: 40rpx;height: 40rpx;" mode=""></image></view>
				</view>
				<view class="align-center margin-left-sm" @click="map" style="width: 500rpx;">
					<view class="text-bold text-cut" style="max-width: 450rpx;">{{ dataObj.storeName }}</view>
					<view class="text-sm text-brown cu-tag round sm text-cut" style="max-width: 450rpx;">{{ dataObj.address }}</view>
				</view>
			</view>

			<view class="margin-sm  dm">
				<view class="padding-sm radius margin-top-sm  text-sm bg-black">
					欢迎来到由
					<text class="text-yellow text-bold">{{ dataObj.nickname }}</text>
					组的局，计费
					<text class="text-yellow text-bold">AA制</text>
					，最终付款方式根据实际情况而定，局内人数满人后，请准时参加，您对我们非常重要哦！
				</view>
				<view class="radius margin-top-sm">
					<view class="text-bold">
						组局成员
						<view @click="showModal" data-target="bottomModal" class="cu-btn round bg-yellow sm margin-left" v-if="dataObj.over!=1">邀请好友</view>
						<view @click="subscribe" data-target="bottomModal" class="cu-btn round bg-yellow sm margin-left" v-if="dataObj.over!=1">订阅通知</view>
					</view>
					<view class="padding-sm text-sm">
						<view
							class="cu-avatar round margin-left margin-top"
							:style="'background-image: url(' + item.avatarUrl + ')'"
							v-for="(item, index) in dataObj.users"
							:key="index"
						>
							<view
								class="cu-tag badge"
								:class="{ 'cuIcon-male,bg-blue': item.gender == 1 ? true : false, 'cuIcon-female,bg-pink': item.gender == 1 ? false : true }"
							></view>
						</view>
						<view class="cu-avatar round margin-left margin-top"  v-for="(item, index) in dataObj.people - dataObj.users.length" :key="index">
							<view class="cuIcon-people "></view>
						</view>
					</view>
				</view>
				<view class="radius margin-top-sm" v-if="dataObj.temporary>0 && dataObj.over!=1">
					<view class="text-bold">
						临时车位
						<view @click="addTemporary(0)" data-target="bottomModal" class="cu-btn round bg-yellow sm margin-left">加入</view>
					</view>
					<view class="padding-sm text-sm">
						<view
							class="cu-avatar round margin-left margin-top"
							:style="'background-image: url(' + item.avatarUrl + ')'"
							v-for="(item, index) in dataObj.users1"
							:key="index"
							@click="addTemporary(1)"
						>
							<view
								class="cu-tag badge"
								:class="{ 'cuIcon-male,bg-blue': item.gender == 1 ? true : false, 'cuIcon-female,bg-pink': item.gender == 1 ? false : true }"
							></view>
						</view>
						<view class="cu-avatar round margin-left margin-top" @click="addTemporary(0)" v-for="(item, index) in dataObj.temporary - dataObj.users1.length" :key="index">
							<view class="cuIcon-people "></view>
						</view>
					</view>
				</view>
				<view class="padding-sm radius margin-top-sm text-center text-xl solids" v-if="dataObj.over==1">
					该车队已解散
				</view>
				<view class="flex justify-around round padding" style="position: fixed;bottom: 80rpx;width: 670rpx;" v-if="dataObj.over!=1">
					<view class="cu-btn round line-white" style="width: 38%;" v-if="dataObj.user_verification == 1 && dataObj.order_verification == 0" @click="InitiateRefund">
						申请退款
					</view>
					<view class="cu-btn round line-white" style="width: 38%;" v-show="dataObj.user_status == 1 && dataObj.user_verification != 1" @click="CrudCar(2)">退出</view>
					<view class="cu-btn round line-white" style="width: 38%;" v-show="dataObj.user_status == 2 && dataObj.user_verification != 1" @click="addTemporary(1)">退出</view>
					<view
						class="cu-btn round bg-yellow"
						:class="{ 'bg-grey': dataObj.user_verification === 1 ? true : false }"
						style="width: 59%;"
						v-if="dataObj.user_status == 1 || dataObj.user_status == 2"
						@click="getWriteCode"
					>
						{{ dataObj.user_verification === 1 ? '您已核销' : '到店核销' }}
					</view>

					<button
						v-if="(vuex_user.phone == '' || vuex_user.phone == null) && dataObj.user_status != 1 && dataObj.over != 2 && dataObj.temporary === 0"
						class="cu-btn round bg-yellow"
						style="width: 59%;"
						open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber"
					>
						加入
					</button>
					<view class="cu-btn round bg-yellow" style="width: 59%;" v-show="dataObj.user_status != 1 && dataObj.over != 2 && vuex_user.phone && dataObj.temporary === 0" @click="CrudCar(1)">
						加入
					</view>
				</view>
			</view>

			<view class="margin-sm  dm" v-if="false">
				<view class="margin-bottom-sm text-bold text-lg">剧本角色（点击选择角色）</view>
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<view
						@click="showRoleModal"
						data-target="Image"
						:data-index="index"
						v-for="(item, index) in dataObj.role"
						:key="index"
						class="cu-card dm-item scroll-view-item_H radius"
					>
						<image class="radius" :src="$isHttp(item.picture)" mode="aspectFill"></image>
						<view class=" text-center">{{ item.role_name }}</view>
					</view>
				</scroll-view>
			</view>

			<view class="margin-sm radius padding-sm " style="background-color: #252516;"><mp-html :content="dataObj.note" /></view>
			<view class="padding-tb-sm" style="height: 100rpx;"></view>
		</view>

		<!-- 核销码 -->
		<van-popup :show="modalName == 'WriteCode' ? true : false" round @click-overlay="hideModal">
			<view class="text-center text-bold">核销码</view>
			<uqrcode ref="uqrcode"></uqrcode>
			<view class="text-center" @click="$copy(WriteCode)">
				<view>{{ WriteCode }}</view>
				<view>(点击复制)</view>
			</view>
		</van-popup>

		<van-popup :show="show" closeable round @close="hideModal" @click-overlay="hideModal">
			<image :src="preImg" style="width: 420rpx;height: 600rpx;" mode=""></image>
			<view class="cu-bar bg-white"><view class="action margin-0 flex-sub  solid-left" @tap="hideModal">与该角色绑定</view></view>
		</van-popup>

		<!-- //底部分享窗口 -->
		<van-popup :show="modalName == 'bottomModal' ? true : false" @close="hideModal" position="bottom">
			<view class="">
				<view class="cu-bar bg-white">
					<view class="action text-green"></view>
					<view class="action text-blue" @click="hideModal">取消</view>
				</view>
				<view class="padding-xl">
					<button class="btn share_friends" open-type="share">分享好友</button>
					<!-- <button type="">生成海报图</button> -->
				</view>
			</view>
		</van-popup>

		<van-popup :show="loginModel" @close="payBeforPop = false" overlay-style="background-color: #474747;" round>
			<button type="primary" open-type="getUserInfo" @click="login">请登录</button>
		</van-popup>

		<van-popup :show="payBeforPop" round @close="payBeforPop = false" close-on-click-overlay>
			<view style="width: 600rpx;height: auto;padding: 30rpx;">
				<van-cell-group inset>
					<van-cell title="买单金额" icon="shopping-cart">
						<view slot="">
							<view class="text-lg text-red">￥{{ payInfo.price }}</view>
						</view>
					</van-cell>
					<van-cell title="会员折扣" icon="vip-card" is-link v-show="selectGemIndex === -1" >
						<view :class="{'text-bold':payInfo.member?true:false, 'text-yellow':payInfo.member?true:false}">
							{{!payInfo.member ? '未开通会员' : payInfo.member + '折'}}
						</view>
					</van-cell>
					<van-cell
						title="优惠券"
						icon="coupon"
						:label="selectCouponIndex === -1 ? '' : payInfo.coupon[selectCouponIndex].type === 0 ? '满' + payInfo.coupon[selectCouponIndex].number + '减' + payInfo.coupon[selectCouponIndex].number_reduce:'满' + payInfo.coupon[selectCouponIndex].number + '打' + payInfo.coupon[selectCouponIndex].number_reduce+'折'"
						@click="showModal"
						data-target="coupon"
						is-link
						v-show="selectGemIndex === -1"
						value-class="text-yellow"
					>
					<view :class="{'text-green':payInfo.coupon.length >0?true:false}">
						{{payInfo.coupon.length === 0 ? '无可用优惠券' :selectCouponIndex === -1 ? '可使用优惠券' : payInfo.coupon[selectCouponIndex].name}}
					</view>
					</van-cell>
					<van-cell
						title="钻石卡"
						icon="gem"
						@click="showModal"
						data-target="gem"
						is-link
					>
					<view :class="{'text-green':payInfo.userCar.length >0?true:false}">{{payInfo.userCar.length === 0 ? '无可用钻石卡' : selectGemIndex === -1 ? '可使用钻石卡' : '使用钻石卡'}}</view>
					</van-cell>
					<van-cell center @click="payType = !payType" v-show="selectGemIndex === -1">
						<template #title>
							<view>
								我的余额:
								<text class="text-green">{{ payInfo.balance }}</text>
								元
							</view>
						</template>
						<template #right-icon>
							{{ payType ? '微信支付' : '余额支付' }}
							<van-switch :value="payType" size="24" inactive-color="#61ba37" active-color="#b6981d" />
						</template>
					</van-cell>
				</van-cell-group>
				<view class="text-center margin-tb-xs" v-show="selectGemIndex === -1">
					<text class="text-yellow">￥</text>
					<text class="text-yellow text-sl">{{ PaidIn }}</text>
					<text class="text-yellow">元</text>
				</view>
				<view class="text-center text-orange margin-tb-xs" v-show="selectGemIndex === -1">(以实付金额为准)</view>
				<van-button type="primary" color="#3b301a" @click="Payment" block>{{ selectGemIndex === -1 ? '支付' : '使用钻石卡预约' }}</van-button>
			</view>
		</van-popup>
		<van-popup :show="modalName == 'coupon'" round position="bottom" @close="modalName = ''" close-on-click-overlay>
			<view class="padding">
				<van-radio-group v-model="selectCoupon">
					<van-cell-group>
						<van-cell
							@click="
								modalName = '';
								selectCouponIndex === index ? (selectCouponIndex = -1) : (selectCouponIndex = index);
								selectCouponIndex === index ? (selectCoupon = item.id) : (selectCoupon = '');
							"
							:title="item.name"
							:label="item.type === 0 ? '满' + item.number + '减' + item.number_reduce : '满' + item.number + '打' + item.number_reduce + '折'"
							v-for="(item, index) in payInfo.coupon"
							:key="index"
							clickable
						>
							<template #right-icon>
								<van-radio :name="item.id" />
							</template>
						</van-cell>
					</van-cell-group>
				</van-radio-group>
			</view>
		</van-popup>

		<van-popup :show="modalName == 'gem'" round position="bottom" @close="modalName = ''" close-on-click-overlay>
			<view class="padding">
				<van-radio-group v-model="selectGem">
					<van-cell-group>
						<van-cell
							@click="
								modalName = '';
								selectGemIndex === index ? (selectGemIndex = -1) : (selectGemIndex = index);
								selectGemIndex === index ? (selectGem = item.id) : (selectGem = '');
							"
							:title="'钻石卡'"
							:label="'有效期至' + item.expiration_time.split(' ')[0]"
							:value="'剩余可用次数:' + (item.count_surplus <0 ? '无限次' : item.count_surplus)"
							v-for="(item, index) in payInfo.userCar"
							:key="index"
							clickable
						>
							<template #right-icon>
								<van-radio :name="item.id" />
							</template>
						</van-cell>
					</van-cell-group>
				</van-radio-group>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import {websocket} from '@/initial.js'
export default {
	data() {
		return {
			show: false,
			modalName: '',
			loginModel: false,
			payBeforPop: false,
			bshow: false,

			dataObj: '',
			id: '',
			preImg: '',
			payInfo: '',

			selectGemIndex: -1, //选择的钻石卡下标
			selectGem: '', //选择的钻石卡id

			selectCouponIndex: -1, //选择的优惠券下标
			selectCoupon: '', //选择的优惠券id
			// PaidIn:0,  //实付金额
			payType: false, //支付方式，false余额，true微信

			timeout: 10000, // 30s
			timeoutObj: '',

			WriteCode:'',//核销码
		};
	},
	computed: {
		PaidIn: function() {
			let num = this.payInfo.price;
			if(this.payInfo.member){
				num=this.payInfo.price*this.payInfo.member/10
			}
			if (this.selectCouponIndex !== -1) {
				if(this.payInfo.coupon[this.selectCouponIndex].type===0){
					num=this.$subNum(num,this.payInfo.coupon[this.selectCouponIndex].number_reduce)
				}else{
					num = num * this.payInfo.coupon[this.selectCouponIndex].number_reduce/10;
				}
			}
			num=Math.floor(num * 100) / 100.00  //保留两位小数，不四舍五入
			num=this.$amountCvs(num,2)
			if (num <0.01) return '0.00';
			return num;
		}
	},
	watch: {
		payBeforPop: function(newVal, oldVal) {
			if (newVal) {
				this.$u.api
					.payBefore({
						userId: this.vuex_user.id,
						orderId: this.id
					})
					.then(res => {
						this.payInfo = res.data;
						console.log(this.payInfo);
					});
			}
		}
	},
	onLoad(option) {
		this.id =  option.id
		if (this.vuex_user.id == undefined) {
			this.loginModel = true;
			uni.setStorageSync('carId', option.id);
		} else {
			this.$u.api
				.FleetDetails({
					id: option.id,
					userId: this.vuex_user.id
				})
				.then(res => {
					if(res.code===200){
						this.dataObj = res.data;
					}
					if(res.code===401){
						this.loginModel = true;
						uni.setStorageSync('carId', option.id);
						this.$u.vuex('vuex_user',{})
					}
				});
			// .判断是否已连接
			this.checkOpenSocket();
			if(this.vuex_userCarId!=-1){
				this.selectGem=this.vuex_userCarId
				this.selectGemIndex=''
			}
		}

	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
		}
		return {
			title: '来自' + this.vuex_user.nickname + '的剧本杀拼车',
			path: 'pageB/script/AppointmentProgress?id=' + this.id,
			imageUrl: this.$isHttp(this.dataObj.picture),
			complete: () => {
				this.modalName = '';
			}
		};
	},
	onBackPress(options) {
		let canNavBack = getCurrentPages();
		if (canNavBack && canNavBack.length > 1) {
			uni.navigateBack({
				delta: 1
			});
		} else {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}
	},
	onUnload() {
		uni.closeSocket();
		clearInterval(this.timeoutObj);
	},
	methods: {
		//加入退出临时车位
		addTemporary(i){
			this.$u.api.addTemporary({
				orderId:this.id,
				userId:this.vuex_user.id,
				select:i
			}).then(res=>{
				if(res.code===200){
					this.$successToast(res.message)
				}
			})
		},
		/* 申请退款 */
		InitiateRefund() {
			this.$u.api
				.InitiateRefund({
					orderId: this.id,
					userId: this.vuex_user.id
				})
				.then(res => {
					if (res.code === 200) {
						this.$successToast(res.message);
					} else {
						this.$textToast(res.message);
					}
				});
		},
		/* 获取核销码 */
		getWriteCode() {
			this.$u.api
				.getWriteCode({
					userId: this.vuex_user.id,
					orderId: this.id
				})
				.then(res => {
					if (res.code === 200) {
						this.modalName = 'WriteCode';
						this.WriteCode=res.data
						this.$refs.uqrcode
							.make({
								size: 200,
								text: this.WriteCode
							})
							.then(res => {
								// 返回的res与uni.canvasToTempFilePath返回一致
								console.log(res);
							});
					} else {
						this.$textToast(res.message);
					}
				});
		},
		login() {
			this.$redirectToIsLoginOk('/pageB/script/AppointmentProgress?id=' + this.id);
		},

		// 判断是否已连接
		checkOpenSocket() {
			uni.sendSocketMessage({
				data: 'ping',
				success: res => {
					return;
				},
				fail: err => {
					// 未连接打开websocket连接
					this.openConnection();
				}
			});
		},
		openConnection() {
			// 打开连接
			// uni.closeSocket(); // 确保已经关闭后再重新打开
			// uni.onSocketClose(function(res) {
			// 	console.log('WebSocket 已关闭！')
			// });
			uni.connectSocket({
				url: websocket + this.vuex_user.id + '/' + this.id,
				// url: 'ws://192.168.1.9:8081/websocket/' + this.vuex_user.id + '/' + this.id,
				success(res) {
					console.log('连接中 connectSocket=', res);
				},
				fail(err) {
					console.log('连接失败 connectSocket=', err);
				},
				complete: () => {
					this.start(); // 检测心跳reset,防止长时间连接导致连接关闭
				}
			});
			uni.onSocketOpen(res => {
				console.log('连接成功');
			});
			this.onSocketMessage(); // 打开成功监听服务器返回的消息
		},
		//	打开成功监听服务器返回的消息
		onSocketMessage() {
			// 消息
			uni.onSocketMessage(res => {
				console.log(res);
				this.getSocketMsg(res.data); // 监听到有新服务器消息
			});
		},
		// 监听到有新服务器消息
		getSocketMsg(reData) {
			// 监听到服务器消息
			this.dataObj.users = JSON.parse(reData).list;
			this.dataObj.users1 = JSON.parse(reData).list1;
			if (this.dataObj.user_status === 0) {
				this.dataObj.user_status = JSON.parse(reData).status;
			}
			console.log('收到服务器消息', JSON.parse(reData));
		},
		// 启动心跳 start
		start() {
			clearInterval(this.timeoutObj);
			this.timeoutObj = setInterval(() => {
				uni.sendSocketMessage({
					data: 'ping',
					success: res => {
						console.log('连接中....');
						console.log(this.timeoutObj);
					},
					fail: err => {
						console.log('连接失败重新连接....1');
						this.openConnection();
						console.log(this.timeoutObj);
					}
				});
			}, this.timeout);
		},
		decryptPhoneNumber(e){
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
				//用户决绝授权
				//拒绝授权后弹出一些提示
				this.$textToast('请绑定手机号，接收预约信息');
			} else {
				//允许授权
				console.log(e.detail.encryptedData);
				// e.detail.encryptedData      //加密的用户信息
				// e.detail.iv     //加密算法的初始向量  时要用到
				this.$u.api
					.getUserPhone({
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						userId: this.vuex_user.id
					})
					.then(res => {
						if (res.code === 200) {
							let vuex_user=this.vuex_user
							vuex_user.phone=res.data.phoneNumber
							this.$u.vuex('vuex_user', vuex_user);
							this.CrudCar(1)
						}
					});
			}
		},
		/* 加入退出车队 */
		CrudCar(select) {
			if (select === 1) {
				if (this.dataObj.user_status === 1) {
					this.$textToast('您已加入，请勿重复加入');
					return;
				}
				if (this.payBeforPop === false) {
					this.payBeforPop = true;
					return;
				}
				let payType = this.payType ? 1 : 0;
				if (this.selectGem !== '') {
					payType = 2;
				}
				this.$u.api
					.CrudCar({
						select: select,
						userId: this.vuex_user.id,
						id: this.id,
						couponId: this.selectCoupon,
						payType: payType
					})
					.then(res => {
						this.payBeforPop = false;
						if (res.code == 200 && res.data != null) {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: 'prepay_id=' + res.data.prepayId,
								signType: res.data.signType,
								paySign: res.data.paySign,
								success: res1 => {
									console.log('success:' + JSON.stringify(res1));
								},
								fail: err => {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						} else {
							this.$textToast(res.message);
						}
					});
			}
			if (select === 2) {
				uni.showModal({
					title: '提示',
					content: '是否退出车队？',
					success: res => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$u.api
								.CrudCar({
									select: select,
									id: this.id,
									userId: this.vuex_user.id
								})
								.then(res => {
									if (res.code === 200) {
										// this.dataObj.user_status = 0;
									}
									this.$textToast(res.message);
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
							return;
						}
					}
				});
				return;
			}
		},
		Payment() {
			if(this.PaidIn==0.00){
				this.payType = false;
			}
			if (!this.payType && this.payInfo.balance < this.PaidIn) {
				this.$textToast('余额不足，已选择微信支付');
				this.payType = true;
			}
			this.CrudCar(1);
		},
		async map() {
			//地理编码，获取经纬度
			let re = await uni.request({
				//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
				url: 'https://restapi.amap.com/v3/geocode/geo?parameters?output=JSON&address=' + this.dataObj.address + '&key=7b7fbe6751d2491c692a1728a6c7afa4'
			});
			let location = re[1].data.geocodes[0].location.split(',');
			await uni.openLocation({
				latitude: parseFloat(location[1]),
				longitude: parseFloat(location[0]),
				name: this.dataObj.storeName,
				address: this.dataObj.address,
				success: function() {
					console.log('success');
				}
			});
		},
		//订阅通知
		subscribe(){
			uni.requestSubscribeMessage({
				tmplIds: ['8IbkZdmlMoOrlgReuSRPw0_vcmjv4nDlD8w_pzlV6V0','4X66i6o2r7Q7a94YbjYjVbUcV0AFZ5NoPvB4VUVeZX4','dSkARvtgG2xTeOro_2vJ6cz6BfotbfKq6vDCpyeOL7I'],
				success:(res)=> {
					console.log(res);
					for (let key in res) {
						if(res[key]==="accept"){
							this.$successToast('订阅成功')
						}
					}
				},
				fail(res) {
					uni.showModal({
						content: '检测到您没打开通知权限，为您更好的体验，请去设置打开？',
						confirmText: '确认',
						cancelText: '取消',
						success: res => {
							if (res.confirm) {
								uni.openSetting({
									success: res => {

									}
								});
							}
						}
					});
				}
			});
		},
		showRoleModal(e) {
			this.preImg = this.$isHttp(this.dataObj.role[e.currentTarget.dataset.index].picture);
			this.show = true;
		},
		showModal(e) {
			if (e.currentTarget.dataset.target === 'coupon' && this.payInfo.coupon.length === 0) {
				this.$textToast('无可用优惠券');
				return;
			}
			if (e.currentTarget.dataset.target === 'gem' && this.payInfo.userCar.length === 0) {
				this.$textToast('无可用钻石卡');
				return;
			}
			this.modalName = e.currentTarget.dataset.target;
		},
		hideModal(e) {
			this.show = false;
			this.modalName = '';
			this.onClose = false;
			this.payBeforPop = false;
		},
		callPhone() {
			uni.makePhoneCall({
				phoneNumber: this.dataObj.telephone //仅为示例
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.canvas-hide {
	/* 1 */
	position: fixed;
	right: 100vw;
	bottom: 100vh;
	/* 2 */
	z-index: -9999;
	/* 3 */
	opacity: 0;
}
.bgm {
	position: relative;
	background-color: rgba($color: #303030, $alpha: 0.4);
}

.bgmm {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	-webkit-filter: blur(10px);
	filter: blur(10px);
	z-index: -1;
	background-size: 100% 100%;
}

// 主持人
.supporter {
	background-color: #fff;
}

.padding_top_5 {
	padding-top: 5rpx;
}

.padding_le_10 {
	padding-left: 10rpx;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item_H {
	display: inline-block;
}

.dm {
	width: auto;

	.dm-item {
		width: 210rpx;
		height: 300rpx;
		// background-color: #fff;
		margin-left: 15rpx;
		overflow: hidden;

		&:nth-child(1) {
			margin-left: 0;
		}

		image {
			width: 100%;
			height: 100%;
		}

		.text {
		}
	}
}
</style>
